<template>
	<view>
		<view class="content">
			<view class="titleName" style="position: fixed;width: 100%;background: #fff;z-index: 999;">
				<view class="taskName">
					<!-- 项目名称: {{data.length>0?data[0].ProjectName:''}} -->
					项目名称: {{data.ProjectName?data.ProjectName:""}}
				</view>
				<view class="taskName">
					任务名称: {{data.TaskName}}
				</view>
				<view class="taskName">
					报告名称: {{data.ReportName}}
				</view>
			</view>

			<view :style="{ paddingTop: paddingTop+ 'rpx'}">

				<view class="block" v-for="im,ix in data.TakeNotesList" :key="im.Id">
					<!-- <view class="left">
						<image :src="im.UserIcon" mode=""></image>
					</view> -->
					<view class="right">
						<view class="rightL">
							<image class="image" v-if="im.MediumList[0].Mtype==='image'"
								@click="onClickItem(im.MediumList[0])" :src="im.MediumList[0].Murl||''"
								style="width: 100%;height: 100%;">
							</image>
							<view class="video" v-if="im.MediumList[0].Mtype==='video'"
								@click="onClickItem(im.MediumList[0])">
								<uni-icons type="videocam-filled" size="30" color="#ccc"></uni-icons>
							</view>
						</view>
						<view class="blockContent">
							<view class="blockContentone" v-for="prop in im.PropData" :key="prop.ControlName">
								{{prop.ControlName}}: {{prop.DefaultValue}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <button type="primary" size="mini" class="fixbtn">下载报告文件</button> -->
		<!-- 选择模版 -->
		<view @click="selectTemplateChange">
			<view class="fabBtn" @click="echarts.onClick"> 选择<br />模板 </view>
		</view>
		<!-- 图片预览 -->
		<ImageView ref="ImageView" :isShow="true"></ImageView>
		<view class="echartsBox">
			<qiun-data-charts type="column" :animation="false" :chartData="chartData0" :opts="opts" @complete="complete"
				canvasId="chart0" />
		</view>
		<view class="echartsBox">
			<qiun-data-charts type="column" :animation="false" :chartData="chartData1" @complete="complete"
				canvasId="chart1" :opts="opts" />
		</view>
		<view class="echartsBox">
			<qiun-data-charts type="column" :animation="false" :chartData="chartData2" @complete="complete"
				canvasId="chart2" :opts="opts" />
		</view>
		<!-- <view class="echartsBox">
			<qiun-data-charts type="column" :animation="false" :chartData="chartData3" :echartsApp="true"
				:echartsH5="true" @complete="complete" canvasId="chart3" />
		</view> -->
		<templatePopup ref="templatePopup" @templateData="getTemplateData"
			:reportName="data.ReportName?data.ReportName:'' ||data.TaskName?data.TaskName:''" />

		<!-- 封皮内容模版 -->
		<TemplateContent ref="templateContent" :show="show" :parentObj="{ ...this }" :data="data" @close="close"
			@open="open" :closeOnClickOverlay="false" />
	</view>
</template>

<script>
	import {
		pathToBase64
	} from '@/js_sdk/mmmm-image-tools/index.js'
	// import ImageView from '@/components/ImageViewCopy.vue'
	import ImageView from '@/components/ImageViewCopy.vue'
	import upload from '../../uni_modules/uview-ui/libs/config/props/upload';
	import templatePopup from './template.vue'
	// 引入封皮内容模版组件
	import TemplateContent from './templateContent.vue'
	export default {
		components: {
			ImageView, // 图片查看
			templatePopup,
			TemplateContent //封皮内容模版
		},
		onBackPress() {

			// if (this.$refs.templatePopup.show) {
			// 	this.$refs.templatePopup.close()
			// 	return true
			// }
			console.log('获取模版组件是否关闭', this.show)
			// 如果打开的是封皮模版组件  关闭封皮模版组件
			if (this.show) {
				this.close()
				return true
			}
		},
		data() {
			return {
				paddingTop: 200,
				show: false, //是否显示封皮模版
				ReportObj: {},
				ids: [],
				chartData0: {},
				chartData1: {},
				chartData2: {},
				chartData3: {},
				entity: {},
				ProjectSchedule: '',
				ReportName: '',
				data: {},
				echartsIdList: [], // 存放 EchartsId
				base64List: [], // 存放 base64 编码
				pDFTemplateDetailesList: [], // 模板数据
				imgList: [],
				opts: {
					fontSize: 20,
					xAxis: {
						fontSize: 20,
						rotateLabel: true,
						rotateAngle: 45,
						marginTop: 20,
						format: '222',
						title: ''
					},
					yAxis: {
						data: [{
							min: 0,
							max: 100
						}]
					},
				}
			}
		},
		onLoad(query) {
			var that = this
			// 动态获取顶部定位区域  动态设置列表内容距离顶部的边距  获取顶部区域view的宽高进行赋值
			this.$nextTick(function() {
				let obj = uni.createSelectorQuery().select('.titleName')
				obj.boundingClientRect(function(data) { // data - 各种参数
					that.paddingTop = data.height + 120
					console.log('获取元素的高度-------this.paddingTopthis.paddingTop---', this.paddingTop)

				}).exec()
			})

			if (query.DATA) {
				let ReportObj = decodeURIComponent(query.DATA)
				let newReportObj = JSON.parse(ReportObj)
				this.ReportObj = newReportObj
			}

			console.log('获取reportView页面获取过来的当前项目参数情况', this.ReportObj)
			// this.ReportName = query.ReportName
			// this.ReportObj.ReportName = this.ReportName
			// console.log('获取传递过来的东参数',this.ReportObj, this.ReportName)
			// this.ids = JSON.parse(query.data)
			// let previewData = {}
			// this.$http('Base_ProjectWork/Base_Project/GetReportJsonData', this.ids).then(res => {
			// 	if (res.Success) {
			// 		this.data = res.Data.reportJsons
			// 		this.imgList = res.Data.ImgTakeNoteList
			// 		previewData.list = this.imgList
			// 		previewData.data = this.data
			// 	} else uni.showToast({
			// 		icon: 'none',
			// 		title: res.Msg
			// 	})
			// 	uni.setStorageSync('previewData', previewData)
			// })
			// echarts
			// this.$http('Base_ProjectWork/Base_Project/GetEchartsData', this.ids).then(res => {
			// 	if (res.Success) {
			// 		// console.log(res);
			// 		let arr = []
			// 		res.Data.forEach((item, index) => {
			// 			let titleName = index == 0 ? '区域' : index == 1 ? '专业' : index == 2 ? '问题' : ''
			// 			this['chartData' + index] = {
			// 				categories: item.xAxisData,
			// 				series: [{
			// 					data: item.seriesData,
			// 					name: titleName
			// 				}],
			// 			}
			// 			arr.push(this['chartData' + index])
			// 		})
			// 		previewData.echarts = arr
			// 		uni.setStorageSync('previewData', previewData)
			// 	}
			// 	console.log(this.chartData0);
			// })

			this.SaveReportData()
		},
		onShow() {
			console.log('返回上一页了', this.show)

		},
		methods: {
			SaveReportData() {
				// this.ReportObj = JSON.parse(JSON.stringify(item))
				this.ReportObj.Describe = ''
				this.ReportObj.Edition = ''
				this.ReportObj.TaskId = this.ReportObj.Id
				// this.ReportObj.ReportName = this.ProjectName + this.TaskName
				this.ReportObj.TakeNotesList = this.ReportObj.TakeNotesList.filter(item => item.IsEnjoy)
				// let newID = ""
				// if (typeof this.parentObj.data[0]._id == 'string') {
				// 	newID = JSON.stringify([this.parentObj.data[0]._id])
				// } else {
				// 	newID = JSON.stringify(this.parentObj.data[0]._id)
				// }
				// console.log('打印id---', this.parentObj.data[0]._id, newID)

				// uni.showLoading()
				this.$http('Base_ProjectWork/Base_Project/SaveReportData', this.ReportObj).then(resJSON => {
					// uni.hideLoading()
					if (resJSON.Success) {
						this.data = resJSON.Data.reportJson
						console.log('获取赋值Base_ProjectWork/Base_Project/SaveReportData接口结果', this.data, resJSON.Data
							.reportJson)
						let previewData = {}
						this.ids = [resJSON.Data.reportJson._id]
						this.imgList = resJSON.Data.ImgTakeNoteList
						previewData.list = this.imgList
						previewData.data = this.data
						let arr = []
						resJSON.Data.echartsValueDTOs.forEach((item, index) => {
							let titleName = index == 0 ? '区域' : index == 1 ? '专业' : index == 2 ? '问题' :
								''
							this['chartData' + index] = {
								categories: item.xAxisData,
								series: [{
									data: item.seriesData,
									name: titleName
								}],
							}
							arr.push(this['chartData' + index])
						})
						previewData.echarts = arr
						uni.setStorageSync('previewData', previewData)

						console.log('获取reportView的整体数据---------------------', resJSON.Data, this.ids, this.data,
							this.imgList,
							previewData)


					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})


			},
			close() {
				this.show = false
			},
			open() {
				let ProjectId = this.data.ProjectId
				this.$nextTick(function() {
					this.$refs.templateContent.ProjectId = ProjectId
					this.$refs.templateContent.getFavList()
					// 获取封皮模版和内容模版列表数据
					this.$refs.templateContent.getDataList()
					this.$refs.templateContent.fabList[1].active = true
					this.$refs.templateContent.coverIndex = 0 // 默认封皮模版和内容模版显示第一个
					this.$refs.templateContent.contentIndex = 0 // 默认封皮模版和内容模版显示第一个
					this.$refs.templateContent.ReportName = this.data.ReportName
				})
				this.show = true
			},
			// 选择模版
			selectTemplateChange() {

				console.log('选择模版了', this.show)
				this.open()
				// 暂时不要删除
				// this.$refs.templatePopup.open(this.data.ProjectId)  
			},
			complete(e) {
				// console.log(e);
			},
			getTemplateData(arr) {
				console.log('获取template-------------------------组件传递过来的arr', arr);
				this.pDFTemplateDetailesList = arr
				this.dialogInputConfirm()
			},
			start(e) {
				console.log('获取最终的start-----------------this.base64List', e);
				this.base64List = e
			},
			// PDF生成
			dialogInputConfirm(e) {
				console.log('PDF生成传递参数idsidsidsids', this.ids)
				console.log('PDF生成传递参数ProjectSchedule', this.ProjectSchedule)
				console.log('PDF生成传递参数base64List', this.base64List)
				console.log('PDF生成传递参数pDFTemplateDetailesList', this.pDFTemplateDetailesList)
				if (this.data.PdfUrl) {
					this.showModal(this.data.PdfUrl)
				} else {
					uni.showLoading({
						title: 'PDF生成中',
						mask: true
					})
					this.$http('Base_ProjectWork/Base_Project/GetReportPDF', {
						"Ids": this.ids,
						"ProjectSchedule": this.ProjectSchedule,
						"EchartsImg": this.base64List,
						pDFTemplateDetailesList: this.pDFTemplateDetailesList
					}).then(res => {
						console.log(res);
						uni.hideLoading()
						if (res.Success) {
							this.showModal(res.Data)
						} else uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					})
				}
			},
			onClickItem(img) {
				let idx = this.imgList.findIndex(item => item.Murl == img.Murl)
				console.log('报告页面点击的图片', idx, this.imgList, img, img.Murl)
				this.$refs.ImageView.open(this.imgList, idx == -1 ? 0 : idx, 'true+true')
			},
			// 弹窗提示
			showModal(url) {
				console.log(url);
				uni.showModal({
					title: '提示',
					content: `PDF已生成,请选择下载或分享\n注:获得编辑版本请登录zytsaas.com`,
					cancelText: '分享',
					confirmText: '下载',
					success: (val) => {
						if (val.confirm) {
							this.download(url)
						} else {
							this.share(url)
						}
					}
				})
			},
			// 微信分享
			share(url) {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: url, // 分享跳转的链接
					title: "报告分享", // 分享标题
					summary: this.data.ProjectName + "报告", // 分享内容文字
					imageUrl: "https://www.yoojet.com/wx.png", //分享封面图片
					success: function(res) {
						// 此处是调起微信分享成功的回调
					},
					fail: function(err) {
						// 此处是调起微信分享失败的回调
						console.log(err);
					}
				});
			},
			// 下载
			download(url) {
				uni.showLoading({
					title: 'PDF下载中',
					mask: true
				})
				uni.downloadFile({
					url,
					header: {
						'Access-Control-Allow-Origin': '*'
					},
					filePath: '/Download',
					success: (res) => {
						console.log(res);
						uni.openDocument({
							filePath: res.tempFilePath,
							success: function(res) {
								console.log('打开文档成功');
								uni.navigateBack()
							},
							fail: function(res) {
								uni.showToast({
									title: JSON.stringify(res)
								})
								uni.navigateBack()
							}
						})
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: 'PDF下载失败,请重新尝试'
						})
					},
					complete() {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	export default {
		methods: {
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				setTimeout(function() {
					const loadCanvas0 = document.getElementById('chart0'); //将canvas转换成beast64 
					const base64Str0 = loadCanvas0.firstChild.toDataURL('image/jpg');
					const loadCanvas1 = document.getElementById('chart1'); //将canvas转换成beast64 
					const base64Str1 = loadCanvas1.firstChild.toDataURL('image/jpg');
					const loadCanvas2 = document.getElementById('chart2'); //将canvas转换成beast64 
					const base64Str2 = loadCanvas2.firstChild.toDataURL('image/jpg');
					ownerInstance.callMethod('start', [base64Str0, base64Str1, base64Str2])
				}, 400);
			}
		}
	}
</script>
<style lang="scss" scoped>
	.fabBtn {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 55px;
		height: 55px;
		background-color: #d1100b;
		border-radius: 45px;
		z-index: 11;
		color: #fff;
		font-weight: 600;
		right: calc(15px + var(--window-right));
		bottom: calc(30px + var(--window-bottom));
		box-shadow: 0 1px 8px 1px rgba(165, 165, 165, 0.2);
	}

	.echartsBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 1200px;
		position: fixed;
		height: 500px;
		z-index: -99;


		.echarts {
			width: 100%;
			height: 300px;
		}
	}

	.fixbtn {
		position: fixed;
		bottom: 10px;
		right: 10px;
		z-index: 99;
	}

	.content {
		padding-bottom: 50px;
		box-sizing: border-box;
		height: 100vh;
		overflow-y: scroll;

		.taskName {
			padding: 0 15rpx;
			font-size: 36rpx;
			color: #336dba;
			font-weight: 600;
			line-height: 2;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.projectName {
			color: rgb(209, 16, 10);
		}

		.block {
			display: flex;

			.left {
				width: 100rpx;
				overflow: hidden;
				padding: 0 15rpx;
				text-align: center;

				image {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.right {
				flex: 1;
				box-sizing: border-box;
				padding: 0 15rpx;
				display: flex;
				border-bottom: 1px solid #dedede;
				padding-bottom: 20rpx;
				margin: 10rpx 0;

				.rightL {
					width: 55px;
					height: 55px;
					border: 1px solid #ccc;
					margin-right: 10px;
					position: relative;
					border-radius: 10rpx;
					padding: 10rpx;

					.image {
						width: 100%;
						height: 100%;
					}

					.video {
						width: 100%;
						height: 100%;
						background: #fff;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.blockContent {
					flex: 1;
					width: 100px;
					display: flex;
					height: 100%;
					align-items: center;
					display: flex;
					height: 100rpx;
					align-items: center;
					flex-wrap: wrap;

					.blockContentone {
						width: 50%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.picBox {
					display: flex;
					flex-wrap: wrap;
					margin: 20rpx 0;

					.pic {
						height: 210rpx;
						box-sizing: border-box;
						border: 1px solid #ccc;
						width: 32%;
						margin-bottom: 10rpx;

					}

					.videoBox {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>